<template>
    <div id="inOut">

        <el-form :inline="true" class="demo-form-inline">

            <el-form-item :label="$t('日期范围')">
                <el-date-picker
                    v-model="date"
                    type="daterange"
                    range-separator="~"
                    :start-placeholder="$t('开始日期')"
                    :end-placeholder="$t('结束日期')">
                </el-date-picker>

            </el-form-item>

            <el-form-item :label="$t('出/入')">
                <el-select v-model="inOutType" filterable placeholder="请选择" style="width: 100px">
                    <el-option  :label="$t('全部')" value="0"></el-option>
                    <el-option  :label="$t('入库')" value="1"></el-option>
                    <el-option  :label="$t('出库')" value="2"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item :label="$t('商品类型')">
                <el-select v-model="productType" filterable placeholder="请选择" style="width: 100px">
                    <el-option v-for="item in productTypeList" :key="item.value"
                               :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item :label="$t('商品')">
                <el-select v-model="productId" filterable placeholder="请选择">
                    <el-option
                        v-for="item in productList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="search">{{ $t('查询') }}</el-button>
            </el-form-item>

        </el-form>


        <div class="bottom">
            <div>
                <span class="text">{{ $t('总数量') }}:</span>
                <span class="price">{{ sumNumber }}</span>

                <span class="text">{{ $t('总价格') }}:</span>
                <span class="price">{{ sumCost }}</span>
            </div>

            <div>

            </div>

        </div>

        <el-table :data="tableData3" border style="width: 100%">
            <el-table-column prop="time" :label="$t('出入库时间')" width="200"> </el-table-column>
            <el-table-column prop="number" :label="$t('出入库数量')" width="120"> </el-table-column>
            <el-table-column prop="price" :label="$t('单价')" width="120"> </el-table-column>
            <el-table-column prop="total" :label="$t('总价')" width="120"> </el-table-column>
            <el-table-column prop="account" :label="$t('操作人')" width="120"> </el-table-column>
        </el-table>



    </div>
</template>

<script>
export default {
    name: "inOut"
}
</script>

<style scoped>

</style>
